[#ftl]
[@define "agile.MultiSelectEditorX" "_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin"]
//summary:advanced multi-select editor which can add/delete/edit the options through the option editor, the options will be freshed to the valueOptions(dijit/form/MultiSelect) widget
//example:
//	<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector">	 	 
// 	 <div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"xxx",htmlName:"xx",fireOnChange:false'></div>
// 	 <div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"yyy",htmlName:"yy",fireOnChange:false'></div>
//	</div>
//	there are two editors defined at the example, it means 
//	1) each option is composed by the value of these two editors 
//	2) when an option is selected in the valueOptions(dijit/form/MultiSelect) widget, the option will be decomposed  
//
 [#assign templateString]
 	<table style="height:100%;width:100%">
	<tr><td colspan="3"><div data-dojo-attach-point="containerNode"><!--option editor--></div></td></tr>
	<tr>	
		<td></td>
		<td width="20px"><img class='agileButton agileButtonAdd' data-dojo-attach-point="addButton"></img></td>
		<td width="20px"><img class='agileButton agileButtonRemove' data-dojo-attach-point="removeButton"></img></td>
	</tr>
	<tr>
		<td colspan="3">
			<select data-dojo-type="dijit/form/MultiSelect" data-dojo-attach-point="valueOptions" data-dojo-props='multiple:false,readOnly:true,style:"width:100%;height:50px"'></select>
		</td>
	</tr>	
	</table>
 [/#assign] 
 templateString:"${templateString?js_string}",options:"",title:"",valueDelimeter:","
 ,constructor:function(){
	 aspect.after(this,"startup",lang.hitch(this,function(){
		 if(!this._initMultiSelectEditorX){
			 this.init();
			 this._initMultiSelectEditorX = true;
		 }
	 }));
 }
  ,init:function(){
	  //TODO:stop backspace key event 
		agile.stopKeyEvent(this.valueOptions);
			
		this.own(on(this.addButton,"click",lang.hitch(this,"addOption")));				
		this.own(on(this.removeButton,"click",lang.hitch(this,"removeOption")));
		
		aspect.after(this.valueOptions,"onChange",lang.hitch(this,function(values){
//			//console.log("@@@@values",values.length,values);
			if(values.length > 0){
				this.containedEditor.stringToValue(values[0]);
			}
		}),true);
		aspect.after(this.valueOptions,"removeOptions",lang.hitch(this,function(option){
			this.containedEditor.removeOption(option);
		}),true);
		aspect.after(this.valueOptions,"replaceOptions",lang.hitch(this,function(options){
			this.containedEditor.addOption(options);
		}),true);	
	}
  	,addOption:function(){
  		if(this.containedEditor.processBeforeAdd()){
			var keyValue = this.containedEditor.valueToString();
			//console.log("keyValue",keyValue)
			if(keyValue){
				var exist = false;
				if(keyValue[0]){
					var options = this.valueOptions.getOptions();
					console.log("options",options)
					for(var i = 0; i < options.length; i++){
						if(options[i].value.indexOf(keyValue[0]) != -1){
							exist = true;
							//update for existing option
							if(options[i].value != keyValue[1]){
								this.valueOptions.removeOption(options[i]);
								this.valueOptions.addOption([{label:keyValue[1],value:keyValue[1]}],i);
								//this.containedEditor.onValueChange(this.get("value"));
							}								
							break;
						}
					}
				}					
				
				if(!exist){
					this.valueOptions.addOption([{label:keyValue[1],value:keyValue[1]}]);
					//this.containedEditor.onValueChange(this.get("value"));
				}		
				this.containedEditor.onValueChange(this.get("value"));
			}
		}
  	}
  	,removeOption:function(){
  		var options = this.valueOptions.getSelected();
		for(var i = 0; i < options.length; i++){
			this.valueOptions.removeOption(options[i]);
		}
		this.containedEditor.onValueChange(this.get("value"));
		//clear the editor value
		this.containedEditor.clearValue();
  	}
 	,get:function(name){
		if(name == "value"){
			//get all options from the selector and format them to text
//			return this.valueOptions.getValues(this.valueDelimeter);	
			return this.valueOptions.getLables(this.valueDelimeter);
		}
		return this.inherited(arguments);
	}
 	,set:function(name,value){
		if(name == "value"){
//			console.info(this.name,this.htmlName,"$$$MultiSelectEditorX######value:",value);
			this.valueOptions.clearOptions();
			this.valueOptions.setValues(value,this.valueDelimeter);
			var option = this.valueOptions.getOptions()[0];
			this.containedEditor.stringToValue(option?option.value:"");
		}else if(name == "disabled" || name == "readOnly"){
			this.valueOptions.set(name,value);
		}else{
			this.inherited(arguments);
		}
	}
 	,reset1:function(name,value){
		if(name == "value"){
//			console.info(this.name,this.htmlName,"@@@MultiSelectEditorX######value:",value);
			this.valueOptions.clearOptions();
			this.valueOptions.setValues(value,this.valueDelimeter);
			var option = this.valueOptions.getOptions()[0];			
			this.containedEditor.stringToValue(option?option.value:"");			
		}else if(name == "disabled" || name == "readOnly"){
			this.valueOptions.set(name,value);
		}
		else{
			this.inherited(arguments);
		}
	}
//	,isValid:function(){
//		return true;
//	}
[/@]
